<template>
  <div class="crumbs">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表单</el-breadcrumb-item>
      <el-breadcrumb-item>gitlabPipelines</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="pipelinesTables">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane v-for="item in pipelinesLabel" :key=item :label="item.label" :name="item.name">
        <component :is='item.detail'></component>
      </el-tab-pane>
    </el-tabs>


  </div>

</template>


<script>
  import tabPipelines from './components/pipelines.vue'
  import tabJobs from './components/jobs.vue'
  import tabFaildjobs from './components/failedjobs.vue'
  import tabProjects from './components/projects.vue'
  export default {

    data() {
      return {
        // handleClick: '',
        activeName: 0,

        pipelinesLabel: [
        { label: "Projects", name: "1", detail: tabProjects },
          { label: "Pipeline", name: "2", detail: tabPipelines },
          { label: "Jobs", name: "3", detail: tabJobs },
          { label: "Failed Jobs", name: "4", detail: tabFaildjobs },

        ]
      }
    },
    components: {
      tabPipelines,
      tabJobs,
      tabFaildjobs,
      tabProjects,
    },
    //   computed: {
    //   currentTabComponent() {
    //     return 'tab' + this.currentTab.toLowerCase()
    //   }
    // },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },

  }

</script>

<style scoped>

</style>